<template>
    <div class="pad10 flex-r">
        <div style="width: 300px;">
            <mu-expansion-panel :expand="open === 'doc'" @change="toggle('doc')">
                <div slot="header">文档</div>
                <div slot="default" class="bdtso padt10">
                    <div class="flrc">
                        <mu-button class="flex1" flat to="models">数据结构</mu-button>
                        <mu-button class="flex1" flat to="welcome">接口规范</mu-button>
                    </div>
                </div>
            </mu-expansion-panel>
            <mu-expansion-panel :expand="open === 'run'" @change="toggle('run')">
                <div slot="header">文档</div>
                <div slot="default" class="bdtso padt10">
                    <div class="flrc">
                        <mu-button class="flex1" flat to="welcome">数据结构</mu-button>
                        <mu-button class="flex1" flat to="welcome">接口规范</mu-button>
                    </div>
                </div>
            </mu-expansion-panel>
        </div>
        <div class="flex1" style="width: 0">
            <router-view></router-view>
        </div>

    </div>
</template>

<script>
    export default {
        name: "v1-doc-root",
        data(){
            return{
                open:"doc"
            }
        },
        methods:{
            toggle(name){
                this.open = name
            }
        }
    }
</script>

<style scoped>

</style>